<template>
    <n-drawer v-model:show="isDrawer" width="650" :auto-focus="false" @after-leave="handleReset">
      <n-drawer-content title="广告管理" closable>
        <n-form
          :model="formParams"
          :rules="rules"
          ref="formRef"
          label-placement="left"
          :label-width="100"
        >
          <n-form-item label="广告名称" path="title">
            <n-input
              placeholder="请输入广告名称"
              v-model:value="formParams.title"
            />
          </n-form-item>
          <n-form-item label="上传图片" path="image">
            <BasicUpload
                :action="`${uploadUrl1}/api/common/cosupdate`"
                :width="100"
                :height="100"
                name="file"
                @uploadChange="changeSitePicture"
                :max="1"
                :maxSize="10"
                v-model:value="image"
                helpText="单个文件不超过10MB，最多只能上传1个文件"
            />
          </n-form-item>
          <n-form-item label="图片尺寸">
            <p style="color: brown;">注：1、首页banner(宽700px*高250px)2、问题反馈banner(宽750px*高280px)3、订单详情页(宽700px*高270px)4、登录页(宽375px*高225px)</p>
          </n-form-item>
          <n-form-item label="属性" path="attr">
            <n-radio-group v-model:value="formParams.attr" name="attr">
              <n-space>
                <n-radio :key="1" :value="1">首页banner</n-radio>
                <n-radio :key="2" :value="2">问题反馈banner</n-radio>
                <n-radio :key="3" :value="3">订单详情页</n-radio>
                <n-radio :key="4" :value="4">登录页</n-radio>
              </n-space>
            </n-radio-group>
          </n-form-item>
          <n-form-item label="排序" path="sort">
            <n-input placeholder="请输入排序" v-model:value="formParams.sort" />
          </n-form-item>
        </n-form>
        <template #footer>
          <n-space>
            <n-button @click="handleReset">重置</n-button>
            <n-button type="primary" :loading="subLoading" @click="formSubmit">提交</n-button>
          </n-space>
        </template>
      </n-drawer-content>
    </n-drawer>
  </template>
  
  <script lang="ts" setup>
    import { ref } from 'vue';
    import { useMessage, FormRules } from 'naive-ui';
    import { info,add,edit } from '@/api/advert/index';
    import { useGlobSetting } from '@/hooks/setting';
    const globSetting = useGlobSetting();
    const { uploadUrl } = globSetting;
    const uploadUrl1 = uploadUrl;
    const image = ref([]);

    const rules: FormRules = {
      title: {
        required: true,
        message: '广告名称不能为空',
        trigger: 'blur',
      }
    };

    const defaultValueRef = () => ({
      id: null,
      title: '',
      sort: '',
      image: '',
      attr: '',
    });
  
    const message = useMessage();
    const formRef: any = ref(null);
    const isDrawer = ref(false);
    const subLoading = ref(false);
    const formParams = ref(defaultValueRef());
    const emit = defineEmits(['change']);

    async function openDrawer(id?) {
      if (id) {
        formParams.value.id = id;
        getInfo();
        return;
      }else{
        image.value = [];
      }
      isDrawer.value = true;
    }
  
    function closeDrawer() {
      isDrawer.value = false;
    }
  
    function formSubmit() {
      formParams.value.image = image.value[0];
      formRef.value.validate((errors) => {
        if (!errors) {
          const msg = formParams.value.id ? '编辑成功' : '添加成功';
          if (formParams.value.id) {
            edit(formParams.value).then((_) => {
              message.success(msg);
              emit('change');
              handleReset();
              closeDrawer();
            });
          } else {
            add(formParams.value).then((_) => {
              message.success(msg);
              emit('change');
              handleReset();
              closeDrawer();
            });
          }
        } else {
          message.error('请填写完整信息');
        }
      });
    }
  
    function handleReset() {
      formRef.value.restoreValidation();
      image.value = [];
      formParams.value = Object.assign(formParams.value, defaultValueRef());
    }
  
    function getInfo() {
      info({ id: formParams.value.id }).then((res) => {
        const params = {
          id: formParams.value.id,
          title: res.title,
          sort: res.sort,
          attr: res.attr
        };

        image.value = res.image;

        formParams.value = Object.assign(formParams.value, params);
        isDrawer.value = true;
      });
    }

    function changeSitePicture(file){
      image.value = file;
    }
  
    defineExpose({
      openDrawer,
      closeDrawer,
    });
  </script>
  